<template>
	<view class="deviceMovement">
		<!-- 设备库存 -- 移库操作 -->
		<navBar title="设备库存管理"  @goBack="goBack"></navBar>
		
		<image @click="getDeviceSelect" class="image2" src="/subpackage-equipment/static/gengduo.png" mode=""></image>
		
		<view class="search">
			<baseInput @inputChange="inputChange" @clearInput="clearInput"></baseInput>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<view class="nav2" @click="getstation">
					<view class="name">
						<image class="image" src="/static/image/jidi.png" mode=""></image>
						<view class="fonzt active" v-if="stationName ===''">点击选择基地</view>
						<view class="fonzt" v-else>{{ stationName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				<view class="nav2" @click="getBaseSelect">
					<view class="name">
						<image class="image" src="/subpackage-equipment/static/shebei22.png" mode=""></image>
						<view class="fonzt active" v-if="deviceTypeName === ''">点击选择设备类型和名称</view>
						<view class="fonzt" v-else>{{ deviceTypeName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				
				<view class="info collapseUpload uniCollapse">
					<uni-collapse>
						<checkbox-group @change="checkboxChange">
							<uni-collapse-item  v-for="(item,index) in deviceList" title-border="show" :key="item.id" :name="index" :title="item.allName" :value="item.totalNum +''">
								<template v-slot:title>
									<view class="collapse-title">
										<view class="left">
											{{ item.allName }}
										</view>
										<view class="right">
											{{ item.totalNum }}
										</view>
									</view>
								</template>
								<label v-for="(value,key) in item.infoList" :key="key">
									<view class="center">
										<view class="item">
											<view class="name">资产归属：</view>
											<view class="value">{{ value.assetOwnership }}</view>
										</view>
										<view class="item">
											<view class="name">设备编号：</view>
											<view class="value">{{ value.code }}</view>
										</view>
										<view class="item">
											<view class="name">规格型号：</view>
											<view class="value">{{ value.specificationModel }}</view>
										</view>
										<!-- <view class="item">
											<view class="name">存储区域：</view>
											<view class="value">{{ value.storageAreaName }}</view>
										</view> -->
										<view class="item">
											<view class="name">基地名称：</view>
											<view class="value">{{ value.stationName }}</view>
										</view>
										<checkbox :value="value.tempId" :checked="value.isChecked" class="checkbox color round" />
										
										<view class="deviceState color1" v-if="value.state === 0">
											正常
										</view>
										<view class="deviceState color2" v-if="value.state === 2" >
											维养中
										</view>
										<view class="deviceState color3" v-if="value.state === 1">
											使用中
										</view>
										<view class="deviceState color4" v-if="value.state === 3">
											维修中
										</view>
									</view>
								</label>
							</uni-collapse-item>
						</checkbox-group>
					</uni-collapse>
				</view>
				
				<!-- 选中的数量 -->
				<view class="nav mt30" @click="getDeviceSelectList">
					<view class="name">已选</view>
					<view class="value">
						<view class="text red">{{ selectTotal || 0 }}</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#A7AEBD" size="20"></u-icon>
						</view>
					</view>
				</view>
				
				
				<!-- 移入存放基地 -->
				<view class="nav mt30">
					<view class="name">移入存放基地</view>
					<view class="value" @click="isShowStation2 = true">
						<view class="text color" v-if="move.stationName ===''">请选择移入存放基地</view>
						<view class="text" v-else>{{  move.stationName }}</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#A7AEBD" size="20"></u-icon>
						</view>
					</view>
				</view>
				
				<!-- 移入存储区域 -->
				<!-- <view class="nav mt30">
					<view class="name">移入存储区域</view>
					<view class="value" @click="getStorageArea">
						<view class="text color" v-if="move.storageAreaName === ''">请选择移入存储区域</view>
						<view class="text" v-else>{{ move.storageAreaName }}</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#A7AEBD" size="20"></u-icon>
						</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
		
		<!-- <view class="fixedButton">
			<u-button type="primary"  :loading="loading" text="提交" @click="submit"></u-button>
		</view> -->
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="submit" :loading="loading" class="button-primary">提交</button> 
			</view>
		</view>
		
		<!-- 选择基地 -->
		<u-picker
			:show="isShowStation" 
			:columns="stationList" 
			keyName="name" 
			:closeOnClickOverlay="true"
			:immediateChange="true"
			@confirm="stationConfirm" 
			@cancel="stationCancel"> 
		</u-picker>
		
		<!-- 筛选设备类型 和 设备名称 -->
		<BaseSelect
			:isShow="isShowBaseSelect" 
			:deviceTypeList="deviceTypeList"
			:titleObj="titleObj"
			@cancel="baseSelectCancel"
			@confrim="baseSelectConfrim">
		</BaseSelect>
		
		<!-- 点击图标出现 筛选设备 -->
		<DeviceStateSelect
		ref="DeviceStateSelect"
		:isShowDevice="false"
		:isShow="isShowDeviceState"
		@confirm="confirm"
		@reset="reset">
		</DeviceStateSelect>
		
		
		<!-- 选择基地2 -->
		<u-picker
			:show="isShowStation2" 
			:columns="stationList" 
			keyName="name" 
			:closeOnClickOverlay="true"
			:immediateChange="true"
			@confirm="stationConfirm2" 
			@cancel="stationCancel2"> 
		</u-picker>
		
		<!-- 选择存储区域 -->
		<!-- <u-picker
			:show="isShowStorageArea" 
			:columns="storageAreaList" 
			keyName="name" 
			:closeOnClickOverlay="true"
			@confirm="storageAreaConfirm" 
			@cancel="storageAreaCancel"> 
		</u-picker> -->
	</view>
</template>

<script>
	import { getStationList, getStorageAreaList} from "@/api/baseManage/baseManage.js"
	import { getDeviceType } from "@/api/emergency/emergencyDispatch.js"
	import { getEquipmentInventoryList, getMoveEquipment } from "@/api/device/deviceStock.js"
	import BaseSelect from "@/components/baseSelect/baseSelect.vue"
	import DeviceStateSelect from "./deviceStateSelect.vue"
	import baseInput from "@/components/baseInput/baseInput.vue"
	import mixins from "@/utils/mixins.js"
	import { mapMutations, mapState } from "vuex"
	import uniCollapse from "./../../components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default {
		mixins: [mixins],
		components: {
			baseInput, BaseSelect, DeviceStateSelect,uniCollapse
		},
		data() {
			return {
				loading: false,
				stationName: "",        // 基地名称
				deviceTypeName: "",     // 设备类型和名称
				stationList: [],              // 基地数据列表
				storageAreaList: [],          // 存储区域数据
				isShowStation: false,         // 基地弹窗是否显示
				isShowStation2: false,
				isShowStorageArea: false,
				isShowBaseSelect: false,      // 筛选设备类型和名称
				deviceTypeList: [],           // 设备类型 和 设备类型 数据
				deviceList: [],               // 格式化了   的设备列表   
				initDeviceList: [],			  // 没有格式化 的设备列表
				obj: {
					stationId: "",      // 基地id
					deviceTypeIds: [],	// 设备小类id
					state: 0,          //  0:正常,1:使用中,2:维修中,3:维养中
					keyWord: "",        // 设备编号+设备名称模糊查询
					assetOwnership: "", // 自有资产/租赁资产
				},
				titleObj: {
					title: "设备类别及设备名称筛选",
					deviceType: "设备类型",
					deviceName: "设备名称"
				},
				isShowDeviceState: false,  // 是否显示 筛选设备框
				selectTotal: 0,              // 已选数量
				selectTempId: [],          // 选中的 tempId
				number: 0,                 // 获取第一次完全的设备类型数据
				move: {
					id: "",          // 设备id
					stationId: "",   // 基地id
					stationName:"",  // 基地名称
					storageAreaId: "",// 存储区域id
					storageAreaName: "",  
				}
			} 
		},
		mounted() {
			if(this.stockTempIds && this.stockTempIds.length >0){
				this.selectTotal = this.stockTempIds.length || 0
				this.selectTempId = this.stockTempIds
			}
			this.getStationList()
			this.getDeviceType()
			this.getDeviceList(this.stockTempIds || [])
		},
		computed: {
			...mapState('device',[ 'stockTempIds'])
		},
		methods:{
			...mapMutations('device', ["getStockSelectList", "getStockTempIds"]),
			// 基地列表数据
			getStationList(){
				getStationList({typeIds: [102,104], name: ""}).then(res=>{
					this.stationList = [res.result]
				}) 
			},
			
			// 设备类型 设备名称 数据
			async getDeviceType(){
				let _data ={
					name: "",
					ex1: 'equipment',
				}
				// 材料类型 树结构
				let res = await getDeviceType(_data)
				let list = res.result.map(item=>({ ...item, isChecked: false, id: item.id + ""}))
				let arr2 = list.filter(item=>item.treeLevel === 2).map(val=>({...val, childrenList:[]}))
				let arr3 = list.filter(item=>item.treeLevel === 3)
				
				arr2.forEach(item=>{
					arr3.forEach(value=>{
						if(item.id === value.parentId + ""){
							item.childrenList.push({...value, tempCode: item.id + '-' + value.id})
						}
					})
				})
				this.deviceTypeList = arr2
			},
			
			// 获取所有设备数据
			getDeviceList(stockTempIds){
				getEquipmentInventoryList(this.obj).then(res=>{
					let list = res.result.map(item=>({...item, allName: item.deviceTypeName +'/'+ item.subDeviceTypeName, totalNum: 1, tempId: item.id+ "", isChecked: false}))
					
					// 只在mounted 获取最新数据的时候执行 (把最全的数据存储起来, 之后又之歌数据 过滤 stockTempIds(this.selectTempId) )
					if(this.number === 0){
						this.initDeviceList = list
						this.number ++ 
					}
					
					this.deviceList = this.ArrayFilter(list)
					
					if(stockTempIds && stockTempIds.length >0){
						this.deviceList.forEach(item=>{
							item.infoList.forEach(value=>{
								if(stockTempIds.includes(value.tempId)){
									this.$set(value, "isChecked", true)
								}else{
									this.$set(value, "isChecked", false)
								}
							})
						})
						
					}
					// console.log(this.deviceList)
				})
			},
			
			// 格式化 数组结构
			ArrayFilter(list){
				let arr = this.DelSameObjValue(list, 'allName', 'totalNum').map(item=>({id: item.id, allName: item.allName, totalNum: item.totalNum, infoList: []}))
				arr.forEach(item=>{
					list.forEach(value=>{
						if(item.allName === value.allName){
							item.infoList.push(value)
						}
					})
				})
				return arr
			},
			
			
			// 打开基地弹窗
			getstation(){
				this.isShowStation = true
			},
			
			// 基地的取消事件
			stationCancel(){
				this.isShowStation = false
				this.stationName = ""
				this.obj.stationId = ""
				this.getDeviceList(this.stockTempIds || [])
			},
			
			// 基地的 confirm 事件
			stationConfirm(data){
				this.obj.stationId = data.value[0].id
				this.isShowStation = false
				this.stationName = data.value[0].name
				this.getDeviceList(this.stockTempIds || [])
			},
			
			// 选择基地
			stationCancel2(){
				this.isShowStation2 = false
				this.move.stationName = ""
				this.move.stationId = ""
			},
			async stationConfirm2(data){
				this.move.stationId = data.value[0].id
				this.move.stationName = data.value[0].name
				this.isShowStation2 = false
				let _query = {
					currPage: 1,
					pageSize: 10000,
					params: {
						stationId: this.move.stationId
					}
				}
				let res = await getStorageAreaList(_query)
				let obj = res.result.list[0] || {}
				this.move.storageAreaId = obj.id || null
				this.move.storageAreaName = obj.name || null
				
			},
			// 选择存储区域
			// async getStorageArea(){
			// 	if(this.move.stationId && this.move.stationName){
			// 		let _query = {
			// 			currPage: 1,
			// 			pageSize: 10000,
			// 			params: {
			// 				stationId: this.move.stationId
			// 			}
			// 		}
			// 		let res = await getStorageAreaList(_query)
			// 		this.storageAreaList = [res.result.list]
			// 		this.isShowStorageArea = true
			// 	}else{
			// 		uni.showToast({
			// 			icon: "none",
			// 			title: "请先选择移入存放基地"
			// 		})
			// 	}
			// },
			// storageAreaCancel(){
			// 	this.isShowStorageArea = false
			// 	this.move.storageAreaId = ""
			// 	this.move.storageAreaName = ""
			// },
			// storageAreaConfirm(data){
			// 	this.move.storageAreaId = data.value[0].id
			// 	this.move.storageAreaName = data.value[0].name
			// 	this.isShowStorageArea = false
			// },
			
			
			// 打开设备类型 和 设备名称弹窗
			getBaseSelect(){
				this.isShowBaseSelect = true
			},
			
			// 取消 设备筛选
			baseSelectCancel(){
				this.deviceTypeName = ""
				this.obj.deviceTypeIds = []
				this.isShowBaseSelect = false
				this.getDeviceList(this.stockTempIds || [])
			},
					
			// 确定 设备筛选
			baseSelectConfrim(deviceList,selectDeviceTypeList, selectDeviceNameList){
				// console.log(deviceList,selectDeviceTypeList, selectDeviceNameList)
				this.isShowPopupSelect = false
				let list = []
				this.deviceTypeList.forEach(item=>{
					selectDeviceTypeList.forEach(value=>{
						if(item.id === value){
							list.push(item.name)
						}
					})
				})
				this.deviceTypeName = list.join(",")
				this.isShowBaseSelect = false
				this.obj.deviceTypeIds = selectDeviceNameList
				this.getDeviceList(this.stockTempIds || [])
			},
			
			
			// 筛选 设备状态 和 资产归属
			getDeviceSelect(){
				this.isShowDeviceState = true
			},
			
			// 重置 筛选
			reset(){
				this.obj.assetOwnership = ""
				// this.obj.state = ""
				this.isShowDeviceState = false
				this.getDeviceList(this.stockTempIds || [])
			},
			
			// 确定 筛选
			confirm(deviceStateId, assetOwnership){
				this.obj.assetOwnership = assetOwnership
				// this.obj.state = deviceStateId
				this.isShowDeviceState = false
				this.getDeviceList(this.stockTempIds || [])
				// console.log(deviceStateId, assetOwnership)
			},
			
			
			// 搜索
			inputChange(value){
				if(value){
					this.obj.keyWord = value
				}else{
					this.obj.keyWord = ""
				}
				clearInterval(this.time)
				this.time = setTimeout(()=>{
					this.getDeviceList(this.stockTempIds || [])
				}, 500)
			},
			
			// 清空
			clearInput(){
				this.obj.keyWord = ""
				this.getDeviceList(this.stockTempIds || [])
			},
			
			
			checkboxChange(e){
				this.selectTempId = e.detail.value
				this.selectTotal = this.selectTempId.length
				this.deviceList.forEach(item=>{
					item.infoList.forEach(value=>{
						if(this.selectTempId.includes(value.tempId)){
							this.$set(value, 'isChecked', true)
						}else{
							this.$set(value, 'isChecked', false)
						}
					})
				})
				console.log(this.selectTempId)
			},
			
			// 提交
			submit(){
				if(this.move.stationId){
					let list = []
					let arr = []
					// 把 isChecked 为 true的提取出来
					this.initDeviceList.forEach(item=>{
						if(this.selectTempId.includes(item.tempId)){
							arr.push(item)
						}
					})
					// console.log(this.selectTempId,"selectTempId")
					// 判断arr的长度
					if(arr.length > 0){
						arr.forEach(item=>{
							let obj = {
								id: item.id,
								stationId: this.move.stationId,
								storageAreaId: this.move.storageAreaId,
							}
							list.push(obj)
						})
						// console.log('deviceList', this.move,list)
						if(this.loading) return
						this.loading = true
						getMoveEquipment(list).then(res=>{
							if(res.success){
								uni.showToast({
									icon:"none",
									title: "保存成功"
								})
								this.clearData()
								this.getDeviceList()
							}
							this.loading = false
						})
					}else{
						uni.showToast({
							icon: "none",
							title: "请先选择设备"
						})
						return
					}
					
				}else{
					if(!this.move.stationId){
						uni.showToast({
							icon: "none",
							title: "请选择移库存放基地"
						})
						return
					}
					
					// if(!this.move.storageAreaId){
					// 	uni.showToast({
					// 		icon: "none",
					// 		title: "请选择移库存储区域"
					// 	})
					// 	return
					// }
				}	
			},
			
			clearData(){
				this.move = {
					id: "",          // 设备id
					stationId: "",   // 基地id
					stationName:"",  // 基地名称
					storageAreaId: "",// 存储区域id
					storageAreaName: "",  
				}
				this.obj = {
					stationId: "",      // 基地id
					deviceTypeIds: [],	// 设备小类id
					state: 0,          //  0:正常,1:使用中,2:维修中,3:维养中
					keyWord: "",        // 设备编号+设备名称模糊查询
					assetOwnership: "", // 自有资产/租赁资产
				}
				
				// 更新 vuex 中的数据
				this.getStockSelectList([])
				this.getStockTempIds([])
				this.selectTotal = 0
				this.stationName= ""        // 基地名称
				this.deviceTypeName= ""     // 设备类型和名称
				this.$refs.DeviceStateSelect.reset()
			},
			
			// 选中的设备
			getDeviceSelectList(){
				let list = []
				let arr = []
				this.initDeviceList.forEach(item=>{
					if(this.selectTempId.includes(item.tempId)){
						list.push(item)
					}
				})
				// console.log(this.selectTempId, 'selectTempId', list)
				// 存储要 vuex 中
				this.getStockSelectList(list)
				this.getStockTempIds(this.selectTempId)
				uni.navigateTo({
					url: "/subpackage-equipment/pages/device/deviceStock/deviceMovementList"
				})
			},
			
			// 返回上一级
			goBack(url){
				uni.redirectTo({
					url: url
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.deviceMovement{
		/* #ifdef MP-WEIXIN */
			padding-top: 176rpx;
		/* #endif */
		padding-bottom: 80rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		background-color: #F5F7FA;
		position: relative;
		.search{
			padding: 0rpx 30rpx;
			padding-bottom: 24rpx;
			background-color: #FFFFFF;
		}
		.image2{
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			width: 50rpx;
			height: 50rpx;
		}
		.scroll-box{
			max-height: calc(100vh - 364rpx);
			padding-top: 10rpx;
		}
		.content{
			padding: 24rpx 32rpx;
			height: calc(100vh - 390rpx);
		}
		.nav2{
			background-color: #FFFFFF;
			height: 106rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 26rpx;
			line-height: 106rpx;
			display: flex;
			align-items: center;
			.name{
				flex: 1;
				display: flex;
				align-items: center;
				.fonzt{
					flex: 1;
					width: 248rpx;
					font-size: 32rpx;
					font-weight: bold;	
					color: #445469;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				.active{
					color: #C0C0C0;
				}
				.image{
					width: 70rpx;
					height: 70rpx;
					margin-right: 24rpx;
				}
			}
		}
		.mt30{
			margin-bottom: 30rpx;
		}
		.info{
			margin-top: 40rpx;
			.center{
				position: relative;
				background-color: #FFFFFF;
				padding: 32rpx 38rpx;
				padding-top: 12rpx;
				border-bottom: 2rpx solid #E2E5ED;
				.item{
					display: flex;
					margin-top: 20rpx;
					
					.name{
						width: 150rpx;
					}
				}
				.checkbox{
					position: absolute;
					top: 120rpx;
					right: 56rpx;
				}
			}
		}
		
		.nav{
			display: flex;
			align-items: center;
			width: 100%;
			height: 114rpx;
			line-height: 100rpx;
			border-bottom: 2rpx solid #e8ebf1;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			background-color: #FFFFFF;
			.name{
				width: 200rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #445469;
			}
			.value{
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #22204E;
				.text{
					flex: 1;
					text-align: right;
					margin-right: 20rpx;
				}
				.color{
					color: #cccccc;
				}
				.red{
					color: #F45151;
				}
			}
		}
		.deviceState{
			position: absolute;
			top: 30rpx;
			right: 35rpx;
			height: 58rpx;
			line-height: 60rpx;			
			padding: 0rpx 30rpx;
			border-radius: 30rpx;
			font-size: 28rpx;
		}
		// 正常
		.color1{
			color: #14BE9F;
			border: 2rpx solid #14BE9F;
			background: rgba(224, 254, 243, 0.2);
		}
		// 维养中
		.color2{
			color: #FFA000;
			background: rgba(255, 247, 228, 0.3);
			border: 2rpx solid #FFA000;
		}
		// 使用中
		.color3{
			color: #2F80ED;
			background: rgba(47, 128, 237, 0.1);
			border: 2rpx solid #2F80ED;
		}
		// 维修中
		.color4{
			color: #FF6A6A;
			background: rgba(255, 106, 106, 0.05);
			border: 2rpx solid #FF6A6A;
		}
	}
</style>
